<template>
  <div class="page">
    <el-card class="table-card">
      <div class="action-box">
        <add-button type="primary" @click="openDialog()">添加相册</add-button>
        <base-button type="success" @click="openDrawer(albumStore.fetchAlbumCategory)">
          相册分类
        </base-button>
        <RefreshButton size="default" @click="fetchData()" />
      </div>
      <ProTable
        :data="dataList"
        :columns="columns"
        :border="false"
        showIndex
        @pagination-change="handlePaginationChange"
      >
        <template #action="{ row }">
          <el-button type="primary" @click="openDialog(row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(row.id)">删除</el-button>
        </template>
      </ProTable>
    </el-card>
    <base-drawer v-model="drawerVisible" title="相册分类" :showFooter="false">
      <div>
        <ProTable
          :editable="true"
          :data="categoryList"
          :columns="categoryColumns"
          :pagination="pagination"
          @save-row="handleSaveCategory"
        />
      </div>
    </base-drawer>
    <base-dialog v-model="dialogVisible" title="编辑相册" @cancel="closeDialog" @ok="handleSubmit">
      <dynamic-form
        ref="formRef"
        :form-config="newFormConfig"
        v-model="formData"
        @submit-success="handleSubmitSuccess"
      />
    </base-dialog>
  </div>
</template>
<script setup lang="ts">
  import {
    fetchAlbumList,
    saveAlbum,
    saveAlbumCategory,
    deleteAlbum
  } from '@/services/apis/media/album'
  import { columns, categoryColumns, formConfig } from './config'
  import { useAlbumStore } from '@/stores/albumStore'
  import { storeToRefs } from 'pinia'

  import { useTableData, useOptions, useDrawer, useFormDialog, useDeleteConfirm } from '@/hooks'
  import RefreshButton from '@/components/BaseButton/RefreshButton.vue'
  const albumStore = useAlbumStore()
  const { categoryList } = storeToRefs(albumStore)
  // 表格数据
  const { dataList, pagination, fetchData, handlePaginationChange } = useTableData(fetchAlbumList, {
    hasPagination: true
  })
  const { handleDelete } = useDeleteConfirm(deleteAlbum, fetchData)
  // 生成下拉选项
  const { generateOptions } = useOptions('categoryId')
  // form表单配置
  const newFormConfig = computed(() => generateOptions(formConfig, categoryList.value))

  // 表单提交
  const {
    dialogVisible,
    formData,
    formRef,
    openDialog,
    closeDialog,
    handleSubmit,
    handleSubmitSuccess
  } = useFormDialog(saveAlbum, fetchData)

  const { drawerVisible, openDrawer } = useDrawer()

  const handleSaveCategory = async (data: any) => {
    data.id = data.id || 0
    try {
      await saveAlbumCategory(data)
      ElMessage.success('保存成功')
      // 等待接口返回后再刷新分类列表，确保数据已更新
      await albumStore.fetchAlbumCategory()
    } catch (error) {
      ElMessage.error('保存失败')
    }
  }

  onMounted(() => {
    fetchData()
    albumStore.fetchAlbumCategory()
  })
</script>
<style lang="scss" scoped></style>
